<!--  -->
<template>
  <div class="base-page">
    <div class="search">
      <slot name="headerLeft"></slot>
      <slot></slot>
    </div>
    <div class="c-table">
      <a-table
        :columns="columnsFormat"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        :row-key="record=>record.id"
        @change="handleTableChange"
      >
        <template
          v-for="(colCustom, key) in columnsCustom"
          :slot="colCustom.customRender"
          slot-scope="text, record, index"
        >
          <span
            v-if="colCustom.type === 'time'"
            :key="key"
          >
            {{ text && moment(text).format(colCustom.format || 'YYYY-MM-DD HH:mm:ss') }}
          </span>
          <template v-else-if="colCustom.customRender === 'no'">
            {{ (pagination.current - 1) * pagination.pageSize + (+index) + 1 }}
          </template>
          <template v-else-if="colCustom.type === 'select'">
            {{ selectFormat(record, text) }}
          </template>
          <slot
            v-else
            :name="colCustom.customRender"
            :record="record"
            :text="text"
            :index="index"
          />
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  components: {},
  props: {
    columns: {
      type: Array,
      default: () => ([])
    },
    customRender: {
      type: Array,
      default: () => ([])
    },
    data: {
      type: Array,
      default: () => ([])
    },
    // 是否初始化请求
    isInitFetch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      moment,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        size: 'middle'
      },
      loading: false
    };
  },
  computed: {
    columnsCustom() {
      return this.columns.filter(item => {
        return item.scopedSlots;
      }).map(item => item.scopedSlots);
    },
    columnsFormat() {
      return this.columns.map(it => {
        const obj = {
          ...it,
          ellipsis: it.ellipsis === undefined ? true : it.ellipsis
        };

        return obj;
      });
    }
  },
  watch: {},
  created() {
    if (this.isInitFetch) {
      this.fetch();
    }
  },
  mounted() {},
  destroyed() {},
  activated() {},
  methods: {
    selectFormat(record = {}, text) {
      if(!record.data) {
        return '';
      }
      const filtItem = record.data.find(item => item.key === text);

      return filtItem ? filtItem.value : '';
    },
    handleTableChange({ current, pageSize }) {
      this.pagination.current = current;
      this.pagination.pageSize = pageSize;

      this.fetch();
    },
    fetch() {
      if (this.loading) {
        return;
      }

      this.loading = true;
      let params = {
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize
      };

      this.$emit('fetch', params);
    },
    fetchSuccess(total) {
      this.pagination.total = total || 0;
    },
    fetchFinally() {
      this.loading = false;
    }
  }
};
</script>

<style lang="less" scoped>
.search{
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.c-table{
  background: #fff;
  /deep/ .ant-btn-link {
    padding: 0;
    margin-right: 48px;
  }
  /deep/ .ant-pagination, .ant-table-pagination{
    margin-right: 16px;
  }
}
</style>
